<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>

    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-lang-es.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/plugins/searchfield.js"; ?>"></script>
    <script type="text/javascript">
    var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
    var BASE_PATH = '<?php echo base_url(); ?>';
    var BASE_ICONS = BASE_PATH + 'assets/icons/';
    Ext.onReady(function() {
        var strUsers = new Ext.data.Store({
            reader: new Ext.data.JsonReader({
                fields: [
                    'idCliente', 'nombre_fantasia', 'razon_social', 'rut', 'giro',
                    'direccion', 'telefono', 'email'
                ],
                root: 'rows', totalProperty: 'results'
            }),
            proxy: new Ext.data.HttpProxy({
                url: BASE_URL + 'cliente/clienteSelect',
                method: 'POST'
            })
        });

        var searchUsers = new Ext.app.SearchField({
            store: strUsers,
            params: {start: 0, limit: 10},
            width: 180,
            id: 'fieldUsersSearch'
        });

        var tbUsers = new Ext.Toolbar({
            items:[ {
            }, searchUsers]
        });
        
        function renderIcon(val) {	
            return '<a href="verFichaCliente/' + val +'"> ' + val  +'</a>';
        }

        var gridUsers = new Ext.grid.EditorGridPanel({
            frame: true, 
            title: 'Cliente',
            border: true, 
            stripeRows: true,
            store: strUsers, 
            //title: '',
            style: 'margin:0 auto;', height: 570, width: 1130,
            columns: [ 
					new Ext.grid.RowNumberer(),
              {            	
                header: "Rut",
                dataIndex: 'rut',
                sortable: true,
                width: 100,
                renderer: renderIcon 
            },{
                    header: "Razon social",
                    dataIndex: 'razon_social',
                    sortable: true,
                    width: 200
                }, {
                    header: "Nombre fantasia",
                    dataIndex: 'nombre_fantasia',
                    sortable: true,
                    width: 200
                }, {
                    header: "Giro",
                    dataIndex: 'giro',
                    sortable: true,
                    width: 100
                }, {
                    header: "Direccion",
                    dataIndex: 'direccion',
                    sortable: true,
                    width: 200
                }, {
                    header: "Telefono",
                    dataIndex: 'telefono',
                    sortable: true,
                    width: 180
                }
            ],
            tbar: tbUsers,
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: strUsers,
                displayInfo: true
            })
        });

        gridUsers.render('divgrid');
        strUsers.load();
    });
    </script>
    <style type="text/css">
        #divgrid {
            background: #e9e9e9;
            border: 1px solid #d3d3d3;
        }
    </style>

    <title></title>
</head>
<body>
    <div id="divgrid"></div>
</body>
</html>